<template>

	<view class="person">
		<!-- 加载动画 -->
		<loading ref="loading" :custom="false" :shadeClick="true" :type="1" :shadeShow="false">
		</loading>
		<view class="person-top">
			<view class="person-top-image">
				{{user.slice(0,1)}}
			</view>
			<view class="person-name">
				{{user}}

			</view>
		</view>
		<view class="person-change" @click="changePwd">
			<image src="../../static/cp.png" mode=""></image>
			<text class="person-change-cp">修改密码</text>
		</view>
		<view class="person-exit" @click="exit">
			退出
		</view>
	</view>
</template>



<script>
	import baseUrl from '../../utils/config.js'
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components: {
			loading
		},
		data() {
			return {
				user: uni.getStorageSync('userName')
			};
		},
		methods: {
			close: function() {
				this.$refs.loading.close();
			},
			open: function() {
				this.$refs.loading.open();
			},

			changePwd() {
				uni.navigateTo({
					url: '../changePwd/changePwd'
				})
			},
			
			// 退出登录
			exit() {

				let that = this;
				let url = 'user/logout'
				that.open();
				uni.request({
					url: baseUrl + url,
					data: {},
					//formdate格式
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {

						that.close();
						if (res.data.status == 200) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('passWord');
							uni.redirectTo({
								url: '../index/index'
							})
						} else if (res.data.status == 401) {
							uni.showToast({
								title: 'token过期，请重新登录',
								duration: 2000,
								icon: 'none',
								success: function() {
									uni.redirectTo({
										url: '../index/index'
									});
								}
							});

						} else {
							let msg = res.data.msg
							if (msg != undefined) {
								uni.showToast({
									title: msg,
									duration: 2000,
									icon: 'none',
									success: function() {
										that.submitFlag = 1;
									}
								});
							} else {
								uni.showToast({
									title: '服务器故障',
									duration: 2000,
									icon: 'none',
									success: function() {
										that.submitFlag = 1;
									}
								});
							}
						}
					},
					fail: (res) => {
						// uni.hideLoading();
						that.close();
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	.person {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		background-color: #f0f0f0;

		&-top {
			margin-top: 20rpx;
			display: flex;
			height: 120rpx;
			background-color: #fff;
			align-items: center;
			padding-left: 40rpx;

			&-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: red;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				margin-right: 40rpx;
			}
		}

		&-change {
			height: 80rpx;
			background-color: #fff;
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			padding-left: 40rpx;

			image {
				padding-right: 20rpx;
			}
		}

		&-exit {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
